<template>
    <div>
        <p class="title">登录</p>
        <van-image
                round
                width="6rem"
                height="6rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-form>
            <van-field
                    v-model="tel"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
            </div>
            <div class="reg">
                <div @click="toRegister">没有账号？立即注册</div>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import axios from 'axios';
    axios.defaults.withCredentials=true;
    export default {
        name: "login",
        data() {
            return {
                show:true,
                tel: '',
                password: '',
            };
        },
        methods: {
            onSubmit(values){
                 this.$axios
            .post('user/login',{
                   tel: this.tel,
                   password: this.password
               })
            .then(res=>{ //登录成功
                if(res.data.code == 1){
                    //记录用户登录状态
                    localStorage.setItem("user",res.data.data)
                    this.$router.push("/addHouse");     
                }else if(res.data.code == 2){
                    localStorage.setItem("user",res.data.data)
                    this.$router.push("/mine");                
                }            
            })    
            .catch(error=>{
                console.log(error);
            });
        },
            toRegister(){
                this.$router.push('/regist')
            }
        }
       
    }

</script>

<style scoped>
    .title {
        /* border-radius: 15px; */
        size:1px;
        height: 50px;
        line-height: 50px;
        background-color: #20a0ff;
        color: #fff;
        text-align: center;
    }

</style>
